#{extends 'main.html' /}
#{set title:'Raven UI' /}

#{set 'moreStyles'}
    <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/blitzer/jquery-ui-1.8.6.custom.css'}">
    <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/data_tables_jui.css'}">
<!--    <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/data_tables.css'}">-->
#{/set}
#{set 'moreScripts'}
    #{script 'jquery-ui-1.8.6.custom.min.js'/}
    #{script 'jquery.bt.min.js'/}
    #{script 'jquery.hotkeys.js'/}
    #{script 'jquery.jstree.js'/}
    #{script 'jquery.layout.min.js'/}
    #{script 'jquery.form.js'/}
    <script type="text/javascript">
        #{include '/public/javascripts/raven-main.js' /}
    </script>
#{/set}

<div class="ui-layout-north">
    <div style="text-align: right">
        <span id="node-tabs-control" style="text-align: right">
            <input type="radio" id="view-node-button" name="node-tabs" tab="view-node-tab"/>
                <label for="view-node-button">&nbsp;</label>
            <input type="radio" id="edit-node-button" name="node-tabs" tab="edit-node-tab"/>
                <label for="edit-node-button">&nbsp;</label>
        </span>
    </div>
</div>
<div id="layout-center" class="ui-layout-center">
    <div id="view-node-tab">
        The node view tab
    </div>
    <div id="edit-node-tab">
        #{include 'node_edit_tab.html' /}
    </div>
</div>
<div id="layout-west" class="ui-layout-west">
    <div id="tree"></div>
</div>
      
<div id="addNodeDialog" title="&{'addNodeDialog_title'}">
    <form id="addNodeDialog_form" action="@{Tree.createNewNode}" method="post">
        <br/>
        <label for="addNodeDialog_parent"><b>&{'addNodeDialog_parent'}</b></label><br/>
        <input id="addNodeDialog_parent" name="parent" type="text" size="80" disabled="true" class="text ui-widget-content ui-corner-all"/>
        <br/>
        <br/>
        <label for="addNodeDialog_name"><b>&{'addNodeDialog_name'}</b></label><br/>
        <input id="addNodeDialog_name" name="name" type="text" size="80"
               class="text ui-widget-content ui-corner-all"/>
        <br/>
        <br/>
        <label for="addNodeDialog_type"><b>&{'addNodeDialog_type'}</b></label><br/>
        <input id="addNodeDialog_type" name="type" type="text" size="80"
               class="text ui-widget-content ui-corner-all"/>
    </form>
</div>

<div id="deleteNodesDialog" title="&{'deleteNodesDialog_title'}">
    <div class="raven-warning">&{'deleteNodesDialog_confirmation'}</div>
    <ol>
        <li>Element 1</li>
    </ol>
</div>

<div id="copy-indicator" class="copy-elements"></div>
<div id="start-stop-control" class="start-node"></div>
